<template>
    <div id="PermissionMenage">
        <el-button type="success" style="margin-bottom:10px;" @click="showAddNew=true,parentDesc='',parentid=0">
            新增权限
        </el-button>
        <el-collapse accordion>
            <el-collapse-item v-for="(item,key,index) in allPermissions" 
            :key="key" :name='index'
            :title="item.permissionDesc"
            style="text-align:left"
            >
            <template slot="title">
                <div class="permissionTitle">
                    {{item.permissionDesc}}
                    <el-button type="danger" size="mini"
                    @click.stop="deletePermission(item._id)"
                    >删除</el-button>
                </div>
            </template>
               <ul>
                   <li v-for="(permission,permissionKey) in item.children" :key="permissionKey"
                   style="padding-left:20px"
                   >
                    <el-button type="primary" 
                    size="mini"
                    @click="showAddNew=true,parentid=item._id,parentDesc=item.permissionDesc"
                    >
                    新增权限
                    </el-button>
                    {{permission.permissionDesc}}
                    <template >
                        <el-button type="danger" size="mini"
                        @click.stop="deletePermission(item._id)"
                        >删除</el-button>
                    </template>
                   </li>
               </ul>
            </el-collapse-item>
        </el-collapse>
        <add-new-permission 
        :showAddNew="showAddNew"
        :parentid='parentid'
        :parentDesc='parentDesc'
        />
    </div>
</template>
<script>
import AddNewPermission from './AddNewPermission'

export default {
    components:{AddNewPermission},
    data(){
        return{
            showAddNew:false,
            parentid:0,
            parentDesc:''
        }
    },
    methods:{
        deletePermission(id){
            var action = ()=>{
                this.$http.post(this.$apis.deletePermissionById,{_id:id})
                .then((resp)=>{
                    this.$message({
                        message:resp.data.message,
                        type:resp.data.success?"success":"danger"
                    });
                    if(resp.data.success){
                        this.$store.dispatch('loadAllPermission')
                    }
                })
            }
            this.opratorConfirm(action,'删除权限');
        }
    },
    computed:{
        allPermissions(){
            return this.$store.getters.allPermissions;
        }
    },
    mounted(){
        this.$store.dispatch('loadAllPermission')
    }
}
</script>
<style lang="scss" scoped>
#PermissionMenage {
    width: 100%;
    height: 100%;

}
#PermissionMenage /deep/ .el-collapse-item__header {
    padding-left: 10px;
}
</style>
